<template>
  <div id="id">
    <router-link to="/aaa">查询天气</router-link>
          <router-link to="/english">每日一句</router-link>
          <router-link to="/wangyiyun">网易云热评</router-link>
          <router-link to="/recipe">菜谱查询</router-link>
          <router-link to="/shenghuo">生活小窍门</router-link>
          <router-link to="/BMITEST">BMI标准体重测试</router-link>
          <hr>
    <button @click="get">获取网易云热评</button>
    <div id="page">
      <p>{{wangyiyun.content}}</p>
      <p>{{wangyiyun.source}}</p>
    </div>
  </div>
</template>

<script>
  export default {
    name: "wangyiyun",
    data(){
      return{
        wangyiyun:''
      }
    },
    methods:{
      get:function (){
        let than=this;
        $.ajax({
          type:"GET",
          url:'http://api.tianapi.com/txapi/hotreview/index?key=0c53d7b6b6dbbe5c3028d59fa6dbcbbd',
          data:{},
          async:true,   // 异步，默认开启，也就是$.ajax后面的代码是不是跟$.ajx里面的代码一起执行
          cache:true,  // 表示浏览器是否缓存被请求页面,默认是 true
          dataType:"json",
          success:function(data){
            data.newslist[0].content="内容 : "+data.newslist[0].content;
            data.newslist[0].source="作者 : "+data.newslist[0].source;
            console.log(data);
            than.wangyiyun=data.newslist[0];
          },
          error:function(){
            console.log("发生错误")
            alert("发生错误");
          },
          complete:function(){
            console.log("ajax请求完事，最终操作在这里完成")
          },
        })
      }
    }
  }
</script>

<style scoped>
  #id{
    text-align: center;
  }
  #page{
    width:500px;
    height: 200px;
    margin: 0 auto;
    text-align: left;
  }
</style>
